/*
 * @Date: 2023-08-07 18:51:25
 * @LastEditors: lyx
 * @LastEditTime: 2023-08-09 10:36:47
 * @FilePath: \sup-mini-app\src\components\Weather\index.tsx
 * @Description:
 */
import React from "react";
import { View, Image } from "@tarojs/components";
import { WEATHER_PHENOMENA } from "@/utils/weather";
import useWeather from "./hooks/useWeather";
import "./index.scss";
import { connect } from "react-redux";

function Weather(props) {
  const { weather: currentWeather } = props;
  const weatherInst = useWeather(props);

  return (
    <View className="weather-wrapper">
      <View className="city">{currentWeather?.city ?? ""}</View>
      <View className="temperature">{currentWeather?.temperature ?? ""}℃</View>
      <View className="placeholder"></View>

      <Image
        className="weather-img"
        src={WEATHER_PHENOMENA[currentWeather?.["weather"] ?? "未知"]}
      />
      <View className="weather">{currentWeather?.weather ?? ""} </View>
      <View className="others">
        <View className="option">
          风向:{currentWeather?.winddirection ?? ""}
        </View>
        <View className="option">
          空气湿度:{currentWeather?.humidity ?? ""}
        </View>
      </View>
    </View>
  );
}

export default connect(({ weather: { weather }, loading }) => ({
  weather,
}))(Weather);
